<template>
    <p class="item_box_c_title flex_sb">
        <span style="margin-right:auto">经济公司联系人</span>
        <el-button plain type="primary" @click="openSnContactsDialog">选择</el-button>
        <el-button plain type="primary" @click="addDialogvisible = true">增加</el-button>
    </p>
    <div class="item_box_c mb10">
        <el-table :data="contacts">
            <el-table-column label="联系人姓名" prop="linkmanName" align="center"/>
            <el-table-column label="手机" prop="linkmanMobile" align="center"/>
            <el-table-column label="邮箱地址" prop="linkmanMail" align="center"/>
            <el-table-column label="部门" prop="linkmanDept" align="center"/>
            <el-table-column label="职位" prop="linkmanTitle" align="center"/>
            <el-table-column label="电话" prop="linkmanPhone" align="center"/>
            <el-table-column label="传真" prop="linkmanFax" align="center"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="{ row }">
                    <el-button link type="primary" @click="deleteRow(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <SelectCustomDialog v-model:visible="contactsDialogVisible" @confirm="selection"/>
    <!-- 增加客户联系人-dialog -->
    <el-dialog v-model="addDialogvisible" @close="addDialogClose" title="增加经济公司联系人" width="60%" append-to-body>
        <el-form ref="addFormRef" class="custom-form" :model="addFormData" :rules="addFormRules" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名" prop="linkmanName">
                    <el-input v-model="addFormData.linkmanName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="部门" prop="linkmanDept">
                    <el-input v-model="addFormData.linkmanDept" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职位" prop="linkmanTitle">
                    <el-input v-model="addFormData.linkmanTitle" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机" prop="linkmanMobile">
                    <el-input v-model="addFormData.linkmanMobile" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮箱" prop="linkmanMail">
                    <el-input v-model="addFormData.linkmanMail" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="电话" prop="linkmanPhone">
                    <el-input v-model="addFormData.linkmanPhone" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="传真" prop="linkmanFax">
                    <el-input v-model="addFormData.linkmanFax" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row justify="center">
                <el-button plain @click="addDialogClose">取消</el-button>
                <el-button plain type="primary" @click="saveContacts">确定</el-button>
            </el-row>
        </el-form>
    </el-dialog>
    </template>
        
    <script setup>
    import SelectCustomDialog from '@/components/SelectCustomDialog.vue'
    
    // 经济公司联系人
    let contactsDialogVisible = ref(false)
    const openSnContactsDialog = ()=>{
        contactsDialogVisible.value = true
    }
    const selection = (arr)=>{
        console.log(arr)
    }
    const contacts = reactive([
        {
            linkmanName: '张三',
            linkmanDept: '技术部',
            linkmanTitle: '技术总监',
            linkmanMobile: '18888888888',
            linkmanMail: 'EMAIL@163.com',
            linkmanPhone: '021-66666666',
            linkmanFax: '678-66666666',
        }
    ])
    const deleteRow = (id) => {
        contacts.splice(contacts.findIndex(item => item.userId === id),1)
    }
    
    // 增加联系人
    const addDialogvisible = ref(false)
    const addFormRef = ref(null)
    const addFormRules = {
        linkmanName: [
            { required: true, message: "请输入", trigger: "blur" },
        ],
        linkmanMobile: [
            { required: true, message: "请输入", trigger: "blur" },
        ]
    }
    const addFormData = reactive({
        linkmanName: '',
        linkmanTitle: '',
        linkmanMobile: '',
        linkmanMail: '',
        linkmanPhone: '',
    })
    const addDialogClose = () => {
        addFormRef.value.resetFields()
        addDialogvisible.value = false
    }
    const saveContacts = () => {
        console.log(addFormRef.value);
        addFormRef.value.validate(valid => {
            if(valid){
                addDialogClose()
            }
        })
    }
    </script>
    
    <style lang="scss" scoped>
    
    </style>